<template>
  <div class="wrapper">
    <div class="top">
      <div class="tips">买券更优惠</div>
    </div>

    <div class="content">
      <div class="coupons" v-for="(item, index) in couponList" :key="item.id">
        <div class="coupons-content">
          <div class="left">
            <image
              class="coupons-img"
              :src="'https://mini.jiaw.com/img/1653720211206.jpg'"
            ></image>
          </div>

          <div class="right">
            <div class="coupons-money">
              <span>{{ item.disValue }}元抵用券</span>
              <span class="coupon-count">X{{ item.count }}</span>
              <span class="price">¥{{ item.price }}.00</span>
            </div>
            <div>{{ item.name }}</div>
            <p>使用期限：{{ item.useTimeEnd }}</p>
          </div>
        </div>
        <div class="bottom">
          <div class="line"></div>
          <div class="rules">
            <p @click="changeRules(index)">使用规则▼</p>
            <p class="rules-item" v-if="current === index && showRules">
              <u-parse :html="item.couponDesc || '无'"></u-parse>
            </p>
          </div>
        </div>
      </div>
    </div>

    <div class="money">
      <div class="money-item">
        <span class="expenditure-amount">购券金额</span>
        <div class="preferential-amount">
          <div class="total-money">￥{{ amountSpent }}</div>
          <!-- <span class="totalFee">共优惠1800元</span> -->
          <span class="totalFee">共优惠{{ discount }}元</span>
        </div>
      </div>
      <div class="btn">
        <button class="buy btns" @click="check">确 认 购 券</button>
        <button class="cancel btns" @click="back">取 消</button>
      </div>
    </div>
  </div>
</template>

<script>
import { recommandCoupon, buyCoupon } from '@/api'
import mixins from '@/mixins'

export default {
  mixins: [mixins],
  onLoad(e) {
    this.id = e.id
    this.money = e.money
    this.recommandCoupons()
  },
  data() {
    return {
      money: '',
      id: '',
      amountSpent: 99,
      discount: 0,
      couponList: [],
      current: 0,
      showRules: false
    }
  },
  methods: {
    recommandCoupons() {
      recommandCoupon(this.money, this.id, this.openId).then(res => {
        this.couponList = res.data.couponIdList
        this.amountSpent = res.data.totalFee
        this.discount = res.data.disAmount
      })
    },
    check() {
      buyCoupon(this.openId, this.id, this.amountSpent, this.couponList).then(
        res => {
          if (res === '您已购买该商品') {
            uni.showToast({
              title: res + '!',
              duration: 1000,
              icon: 'none'
            })
            return
          }
          const { timeStamp, nonceStr, signType, paySign } = res
          wx.requestPayment({
            timeStamp: timeStamp,
            nonceStr: nonceStr,
            package: res.package,
            signType: signType,
            paySign: paySign,
            success: () => {
              uni.showToast({
                title: '买券成功!',
                duration: 1000
              })
              setTimeout(() => {
                uni.navigateTo({
                  url:
                    '/pages/package/shop/component/pay?money=' +
                    this.money +
                    '&id=' +
                    this.id
                })
              }, 1000)
            },
            fail: err => {
              console.log(err)
            }
          })
        }
      )
    }
  }
}
</script>

<style lang="less" scoped>
@import url('../../../../static/css/order.css');
.top {
  height: 120rpx !important;
  .tips {
    font-weight: 600;
    font-size: 32rpx;
    padding: 40rpx 0;
  }
}
.content {
  height: calc(100vh - 450rpx) !important;
  -webkit-overflow-scrolling: touch;
  &::-webkit-scrollbar {
    display: none;
  }

  .coupons-content {
    margin-bottom: 20rpx;

    .left {
      margin-top: 6px;
    }

    .right {
      display: flex;
      // flex-direction: row !important;
      .coupons-money {
        display: flex;
        align-items: center;
        // flex-direction: column;
        span {
          padding-right: 30px;
          font-size: 14px !important;
        }
        .coupon-count {
          color: #df0027;
          // background: #fff;
        }
        .price {
          border: 2px solid red;
          border-radius: 20px;
          color: red;
          width: 60px;
          text-align: center;
          padding: 0 10rpx;
          line-height: 30px;
        }
      }
    }
  }
}
</style>
